<!-- //themeTemplate v0.1.0 add body bg -->
<!-- target: themeTemplate -->
<!-- // visible -->
body.app-theme{opacity:1;visibility:visible;background: ${body_bg}}
<!-- // color set -->
.text-primary { color: ${primary};}
a.text-primary:hover { color: ${sub_primary};}
.text-success { color: ${success};}
a.text-success:hover { color: ${sub_success};}
.text-info { color: ${info};}
a.text-info:hover { color: ${sub_info};}
.text-warning { color: ${warning};}
a.text-warning:hover { color: ${sub_warning};}
.text-danger { color: ${danger};}
a.text-danger:hover { color: ${sub_danger};}
.bg-primary { background-color: ${sub_primary}; color: ${reverse};}
a.bg-primary:hover { background-color: ${primary};}
.bg-success { background-color: ${sub_success};}
a.bg-success:hover { background-color: ${success};}
.bg-info { background-color: ${sub_info};}
a.bg-info:hover { background-color: ${info};}
.bg-warning { background-color: ${sub_warning};}
a.bg-warning:hover { background-color: ${warning};}
.bg-danger { background-color: ${sub_danger};}
a.bg-danger:hover { background-color: ${danger};}

.btn-primary { color: ${reverse}; border-color: ${sub_primary}; background-color: ${primary};}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{ 
	background-color: ${heav_primary};}
.btn-primary.btn-ghost{ color:${primary};}

.btn-success { color: ${reverse}; border-color: ${sub_success}; background-color: ${success};}
.btn-success:hover, .btn-success:focus, .btn-success:active{ 
	background-color:${heav_success};}
.btn-success.btn-ghost{color:${success};}

.btn-info { color: ${reverse}; border-color: ${sub_info}; background-color: ${info};}
.btn-info:hover, .btn-info:focus, .btn-info:active{ 
	background-color: ${heav_info};}
.btn-info.btn-ghost{color:${info};}

.btn-warning { color: ${reverse}; border-color: ${sub_warning}; background-color: ${warning};}
.btn-warning:hover, .btn-warning:focus,.btn-warning:active { 
	background-color: ${heav_warning};}
.btn-warning.btn-ghost{color:${warning};}

.btn-danger { color: ${reverse}; border-color: ${sub_danger}; background-color: ${danger};}
.btn-danger:hover, .btn-danger:focus,.btn-danger:active{ 
	background-color: ${heav_danger};}
.btn-danger.btn-ghost{color:${danger};border-color:${danger};}

.toggle-primary input:checked +.track { border-color: ${primary}; background-color: ${primary};}
.toggle-success input:checked +.track { border-color: ${success}; background-color: ${success};}
.toggle-info input:checked +.track { border-color: ${info}; background-color: ${info};}
.toggle-warning input:checked +.track { border-color: ${warning}; background-color: ${warning};}
.toggle-danger input:checked +.track { border-color: ${danger}; background-color: ${danger};}

.checkbox-primary input:checked:before, .checkbox-primary input:checked +.checkbox-icon:before {border-color: ${primary};  background: ${primary};}
.checkbox-success input:checked:before, .checkbox-success input:checked +.checkbox-icon:before {border-color: ${success};  background: #${success};}
.checkbox-info input:checked:before, .checkbox-info input:checked +.checkbox-icon:before {border-color: ${info};  background: ${info};}
.checkbox-warning input:checked:before, .checkbox-warning input:checked +.checkbox-icon:before {border-color: ${warning};  background: ${warning};}
.checkbox-danger input:checked:before, .checkbox-danger input:checked +.checkbox-icon:before {border-color: ${danger};  background: ${danger};}
<!-- // ui set -->
.btn{border-radius:${radius}}
.app-theme .head{background:${primary};color:${reverse};}
.app-theme .tabs .cur{color:${primary}}
.tabs .cur-bg{background:${primary}}
.checkbox-primary input:checked:before, .checkbox-primary input:checked +.checkbox-icon:before{
	border-color: ${primary};  background: ${primary};
}
.item-icon-left .ion:first-child{color:${primary};}